// CanvasDrawer.js

let frame = false;//是否被选中


export function click() {
    // 处理点击事件的逻辑
    console.log('Canvas Clicked!');
  }
  


let mapData = {//地图数据
}

var Point = function (x, y) {
    return { x: x, y: y };
};



//绘制圆角矩形
function drawRoundedRect(rect, r, ctx, d, a, b, c, bg ,bo) {
    /*
        r a b c d 是圆角
        bg 背景颜色
        bo 边框颜色
    */
    var ptA = Point(rect.x + r, rect.y);
    var ptB = Point(rect.x + rect.width, rect.y);
    var ptC = Point(rect.x + rect.width, rect.y + rect.height);
    var ptD = Point(rect.x, rect.y + rect.height);
    var ptE = Point(rect.x, rect.y);
    ctx.beginPath();
    ctx.moveTo(ptA.x, ptA.y);
    ctx.arcTo(ptB.x, ptB.y, ptC.x, ptC.y, a);
    ctx.arcTo(ptC.x, ptC.y, ptD.x, ptD.y, b);
    ctx.arcTo(ptD.x, ptD.y, ptE.x, ptE.y, c);
    ctx.arcTo(ptE.x, ptE.y, ptA.x, ptA.y, d);
    ctx.fillStyle = bg;  // 另一个方块的背景颜色
    ctx.lineWidth = 4;  // 设置边框的粗细
    ctx.strokeStyle = bo;  // 设置边框颜色 
    ctx.fill();  // 填充路径
    ctx.stroke();
}


export function canvasIcon(data, uuid, isSelected) {
    // console.log(data);
    console.log("isSelected");
    console.log(isSelected);
    const canvasId = 'canvas' + uuid
    var canvas = document.createElement("canvas");
    // canvas.width = canvas.height = 500; // 设置图层高度
    canvas.height = 500; // 设置图层高度

    // 绘制选中边框
    var borderColor = isSelected ? 'red' : '#FFFFFF'; // 根据选择状态调整边框颜色

    // 绘画第一层 图片icon 
    canvas.id = canvasId; // 设置 canvas 的 ID
    var ctx = canvas.getContext('2d');
 
    // 加载图片 
    var image = new Image();
    // image.src  = '/img/draw01.png'; // 
    image.src  = isSelected ? '/img/draw02.png' : '/img/draw01.png';; // 
    image.onload = function () {
        console.log("data:",data)
        ctx.drawImage(image, 50, 70, 220, 220);
        // 绘制文字
        ctx.font = "bold 40px 'Source Han Sans-Regular'";
        ctx.textBaseline = 'hanging';
        var text = data.radioStationCode;
        var textWidth = ctx.measureText(text).width;
        var textX = (canvas.width - textWidth) / 2;
        var textY = 240;
        ctx.fillText(text, textX, textY);
    };
 
    // 绘制第二层 电台名称
    var ctx2 = canvas.getContext('2d');
    var rect = { x: 0, y: 300, width: 300, height: 60 };

    drawRoundedRect(rect, 15, ctx2, 15, 15, 0, 0, '#E7E7E7',borderColor); 
    ctx2.fillStyle = "#101C27";
    ctx2.font = " 32px 'Source Han Sans-Regular'";
    ctx2.textBaseline = 'hanging';
    var text2 = data.radioStationName;
    var textWidth2 = ctx2.measureText(text2).width;
    var textX2 = (rect.width - textWidth2) / 2;
    var textY2 = 320;
    ctx2.fillText(text2, textX2, textY2);

    // 绘制第三层 电台模式
    var ctx3 = canvas.getContext('2d');
    var rect2 = { x: 0, y: 360, width: 300, height: 60 };
    drawRoundedRect(rect2, 0, ctx3, 0, 0, 0, 0, '#E7E7E7',borderColor);
    ctx3.fillStyle = "#101C27";
    ctx3.font = " 32px 'Source Han Sans-Regular'";
    ctx3.textBaseline = 'hanging';
    var text3 = "定时传输";
    var textWidth3 = ctx3.measureText(text3).width;
    var textX3 = (rect.width - textWidth3) / 2;
    var textY3 = 375;
    ctx3.fillText(text3, textX3, textY3);

    // 绘制第四层 电台状态
    var ctx4 = canvas.getContext('2d');
    var rect3 = { x: 0, y: 420, width: 300, height: 60 };
    drawRoundedRect(rect3, 0 , ctx4, 0, 0, 15, 15, '#39BCB8',borderColor);
    ctx4.fillStyle = "#101C27";
    ctx4.font = " 32px '微软雅黑'";
    ctx4.textBaseline = 'hanging';
    var text4 = "空闲";
    var textWidth4 = ctx4.measureText(text4).width;
    var textX4 = (rect.width - textWidth4) / 2;
    var textY4 = 435;
    ctx4.fillText(text4, textX4, textY4);

    canvas.addEventListener('click', click);

    return canvas; // 返回 canvas 对象
}
